<template>
  <div>
    <el-drawer
      v-model="drawer"
      :title="title"
      :size="size"
      :close-on-click-modal="false"
    >
      <div class="body">
        <div class="content">
          <!-- <AddClass ref="formInline1"></AddClass> -->
          <el-form :rules="rules" :model="formInline">
            <el-form-item
              class="pwd"
              label=" 新增类目名称name："
              prop="className"
            >
              <el-input
                type="text"
                class="addClassName"
                placeholder="请输入新增类目的名称"
                v-model="formInline.className"
              >
              </el-input>
            </el-form-item>
            <el-form-item class="pwd" label=" 排序order：" prop="classSort">
              <el-input
                type="text"
                class="addClassSort"
                placeholder="请输入排序数值"
                v-model="formInline.classSort"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="showBtn">
          <el-button type="primary" @click="addImageClass2">{{
            commitText
          }}</el-button>
          <el-button type="primary" @click="close">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
// import AddClass from "@/views/imageList/AddClass.vue";
import { addImageClass } from "@/api/images.js";
import { ref } from "vue";
import { reactive } from "vue";
// const formInline1 = ref(null);
const formInline = reactive({
  className: "",
  classSort: "",
});
const rules = reactive({
  className: [
    {
      required: true,
      message: "请输name",
      trigger: "blur",
    },
  ],
  classSort: [
    {
      required: true,
      message: "请输入order",
      trigger: "blur",
    },
  ],
});
// const emits = defineEmits(["submit"]);
defineProps({
  title: {
    type: String,
    default: "",
  },
  size: {
    default: "45%",
  },
  commitText: {
    type: String,
    default: "提交",
  },
  showBtn: {
    type: Boolean,
    default: true,
  },
});

const drawer = ref(false);
const open = () => {
  drawer.value = true;
};
const close = () => {
  drawer.value = false;
};

defineExpose({
  open,
  close,
});
function addImageClass2() {
  if (
    formInline.className !== undefined &&
    formInline.classSort !== undefined
  ) {
    addImageClass(formInline.className, formInline.classSort)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  // console.log(formInline1);
  // console.log(formInline1.className);
  // console.log(formInline1.classSort);
}
</script>

<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .content {
    height: 85%;
    overflow-y: scroll;
  }
}
</style>
